<template>
  <div>
    <el-form class="demo-form-inline" >
      <div v-if="option!=undefined">
        <div>
          <el-collapse v-model="activeNames" @change="handleChange">
            <el-collapse-item title="饼图设置">
              <el-form-item label="图例联动">
                <el-switch v-model="option.series[0].legendHoverLink"></el-switch>
              </el-form-item>
              <el-form-item label="扇区放大" >
                <el-switch v-model="option.series[0].hoverAnimation"></el-switch>
              </el-form-item>
              <el-form-item label="高亮扇区偏移距离">
                <el-input-number style="width:100%;" v-model="option.series[0].hoverOffset" :min="10" :max="100" ></el-input-number>
              </el-form-item>
              <el-form-item label="选中扇区偏移量">
                <el-input-number style="width:100%;" v-model="option.series[0].selectedOffset" :min="10" :max="100" ></el-input-number>
              </el-form-item>
              <el-form-item label="饼图的扇区是否是顺时针排布">
                <el-switch v-model="option.series[0].clockwise"></el-switch>
              </el-form-item>
              <el-form-item label="其实展示饼图角度">
                <el-input-number style="width:100%;" v-model="option.series[0].startAngle" :min="0" :max="360" ></el-input-number>
              </el-form-item>
              <el-form-item label="最小扇区角度">
                <el-input-number style="width:100%;" v-model="option.series[0].minAngle" :min="0" :max="360" ></el-input-number>
              </el-form-item>
              <el-form-item label="南丁格尔图">
                <el-switch v-model="option.series[0].roseType"></el-switch>
              </el-form-item>
              <el-form-item label="避免标签重叠策略">
                <el-switch v-model="option.series[0].avoidLabelOverlap"></el-switch>
              </el-form-item>
              <el-form-item label="在数据为0时不显示扇区">
                <el-switch v-model="option.series[0].stillShowZeroSum"></el-switch>
              </el-form-item>
              <el-form-item label="鼠标悬浮式的样式">
                <el-radio  v-model="option.series[0].cursor" label="auto">默认</el-radio>
                <el-radio  v-model="option.series[0].cursor" label="pointer">小手</el-radio>
                <el-radio  v-model="option.series[0].cursor" label="move">移动</el-radio>
              </el-form-item>
              <el-form-item label="组件离容器左侧的距离">
                <el-input v-model="option.series[0].left"></el-input>
              </el-form-item>
              <el-form-item label="组件离容器右侧的距离">
                <el-input v-model="option.series[0].right"></el-input>
              </el-form-item>
              <el-form-item label="组件离容器上侧的距离">
                <el-input v-model="option.series[0].top"></el-input>
              </el-form-item>
              <el-form-item label="组件离容器下侧的距离">
                <el-input v-model="option.series[0].bottom"></el-input>
              </el-form-item>
              <el-form-item label="组件宽度">
                <el-input v-model="option.series[0].width"></el-input>
              </el-form-item>
              <el-form-item label="组件高度">
                <el-input v-model="option.series[0].height"></el-input>
              </el-form-item>
              <el-form-item label="饼图的中心x轴">
                <el-input v-model="option.series[0].center[0]"></el-input>
              </el-form-item>
              <el-form-item label="饼图的中心y轴">
                <el-input v-model="option.series[0].center[1]"></el-input>
              </el-form-item>
              <el-form-item label="饼图的内半径">
                <el-input v-model="option.series[0].radius[0]"></el-input>
              </el-form-item>
              <el-form-item label="饼图的外半径">
                <el-input v-model="option.series[0].radius[1]"></el-input>
              </el-form-item>
              <el-form-item label="是否开启动画">
                <el-switch v-model="option.series[0].animation"></el-switch>
              </el-form-item>
              <el-form-item label="是否不响应和触发鼠标事件">
                <el-switch v-model="option.series[0].silent"></el-switch>
              </el-form-item>
              <el-form-item label="初始化动画效果">
                <el-switch v-model="option.series[0].animationType"></el-switch>
              </el-form-item>
              <el-form-item label="初始化动画时长">
                <el-input-number style="width:100%;" v-model="option.series[0].animationDuration" :min="1000" :max="5000" ></el-input-number>
              </el-form-item>
              <el-form-item label="初始化动画缓动效果">
                  <el-select v-model="option.series[0].animationEasing" >
                    <el-option label="linear" value="linear"></el-option>
                    <el-option label="quadraticInquadraticOut" value="quadraticInquadraticOut"></el-option>
                    <el-option label="quadraticInOut" value="quadraticInOut"></el-option>
                    <el-option label="cubicIn" value="cubicIn"></el-option>
                    <el-option label="cubicOut" value="cubicOut"></el-option>
                    <el-option label="cubicInOut" value="cubicInOut"></el-option>
                    <el-option label="quarticIn" value="quarticIn"></el-option>
                    <el-option label="quarticOut" value="quarticOut"></el-option>
                    <el-option label="quarticInOut" value="quarticInOut"></el-option>
                    <el-option label="quinticIn" value="quinticIn"></el-option>
                    <el-option label="quinticOut" value="quinticOut"></el-option>
                    <el-option label="quinticInOut" value="quinticInOut"></el-option>
                    <el-option label="sinusoidalIn" value="sinusoidalIn"></el-option>
                    <el-option label="sinusoidalOut" value="sinusoidalOut"></el-option>
                    <el-option label="sinusoidalInOut" value="sinusoidalInOut"></el-option>
                    <el-option label="exponentialIn" value="exponentialIn"></el-option>
                    <el-option label="exponentialOut" value="exponentialOut"></el-option>
                    <el-option label="exponentialInOut" value="exponentialInOut"></el-option>
                    <el-option label="circularIn" value="circularIn"></el-option>
                    <el-option label="circularOut" value="circularOut"></el-option>
                    <el-option label="circularInOut" value="circularInOut"></el-option>
                    <el-option label="elasticIn" value="elasticIn"></el-option>
                    <el-option label="elasticOut" value="elasticOut"></el-option>
                    <el-option label="elasticInOut" value="elasticInOut"></el-option>
                    <el-option label="backIn" value="backIn"></el-option>
                    <el-option label="backOut" value="backOut"></el-option>
                    <el-option label="backInOut" value="backInOut"></el-option>
                    <el-option label="bounceIn" value="bounceIn"></el-option>
                    <el-option label="bounceOut" value="bounceOut"></el-option>
                    <el-option label="bounceInOut" value="bounceInOut"></el-option>
                  </el-select>
              </el-form-item>
              <el-form-item label="初始化动画延迟">
                <el-input-number style="width:100%;" v-model="option.series[0].animationDelay" :min="0" :max="1000" ></el-input-number>
              </el-form-item>
              <el-form-item label="更新数据时的动画效果">
                <el-radio  v-model="option.series[0].animationTypeUpdate" label="transition">默认</el-radio>
                <el-radio  v-model="option.series[0].animationTypeUpdate" label="expansion">扩展</el-radio>
              </el-form-item>
              <el-form-item label="更新动画时长">
                <el-input-number style="width:100%;" v-model="option.series[0].animationDurationUpdate" :min="0" :max="1000" ></el-input-number>
              </el-form-item>
              <el-form-item label="更新动画缓动效果">
                <el-select v-model="option.series[0].animationEasingUpdate" >
                  <el-option label="linear" value="linear"></el-option>
                  <el-option label="quadraticInquadraticOut" value="quadraticInquadraticOut"></el-option>
                  <el-option label="quadraticInOut" value="quadraticInOut"></el-option>
                  <el-option label="cubicIn" value="cubicIn"></el-option>
                  <el-option label="cubicOut" value="cubicOut"></el-option>
                  <el-option label="cubicInOut" value="cubicInOut"></el-option>
                  <el-option label="quarticIn" value="quarticIn"></el-option>
                  <el-option label="quarticOut" value="quarticOut"></el-option>
                  <el-option label="quarticInOut" value="quarticInOut"></el-option>
                  <el-option label="quinticIn" value="quinticIn"></el-option>
                  <el-option label="quinticOut" value="quinticOut"></el-option>
                  <el-option label="quinticInOut" value="quinticInOut"></el-option>
                  <el-option label="sinusoidalIn" value="sinusoidalIn"></el-option>
                  <el-option label="sinusoidalOut" value="sinusoidalOut"></el-option>
                  <el-option label="sinusoidalInOut" value="sinusoidalInOut"></el-option>
                  <el-option label="exponentialIn" value="exponentialIn"></el-option>
                  <el-option label="exponentialOut" value="exponentialOut"></el-option>
                  <el-option label="exponentialInOut" value="exponentialInOut"></el-option>
                  <el-option label="circularIn" value="circularIn"></el-option>
                  <el-option label="circularOut" value="circularOut"></el-option>
                  <el-option label="circularInOut" value="circularInOut"></el-option>
                  <el-option label="elasticIn" value="elasticIn"></el-option>
                  <el-option label="elasticOut" value="elasticOut"></el-option>
                  <el-option label="elasticInOut" value="elasticInOut"></el-option>
                  <el-option label="backIn" value="backIn"></el-option>
                  <el-option label="backOut" value="backOut"></el-option>
                  <el-option label="backInOut" value="backInOut"></el-option>
                  <el-option label="bounceIn" value="bounceIn"></el-option>
                  <el-option label="bounceOut" value="bounceOut"></el-option>
                  <el-option label="bounceInOut" value="bounceInOut"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="更新动画延迟">
                <el-input-number style="width:100%;" v-model="option.series[0].animationDelayUpdate" :min="0" :max="1000" ></el-input-number>
              </el-form-item>
            </el-collapse-item>
            <el-collapse-item title="标题设置">
              <el-form-item label="是否显示">
                <el-switch v-model="option.series[0].label.show"></el-switch>
              </el-form-item>
              <el-form-item label="文字位置">
                <el-select v-model="option.series[0].label.position" >
                  <el-option label="outside" value="outside"></el-option>
                  <el-option label="inside" value="inside"></el-option>
                  <el-option label="inner" value="inner"></el-option>
                  <el-option label="center" value="center"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否旋转">
                <el-switch v-model="option.series[0].label.rotate"></el-switch>
              </el-form-item>
              <el-form-item label="文本标签颜色">
                <el-color-picker v-model="option.series[0].label.color"></el-color-picker>
              </el-form-item>
              <el-form-item label="文字风格">
                <el-select v-model="option.series[0].label.fontStyle" >
                  <el-option label="normal" value="normal"></el-option>
                  <el-option label="italic" value="italic"></el-option>
                  <el-option label="oblique" value="oblique"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="文字字体的粗细">
                <el-select v-model="option.series[0].label.fontWeight" >
                  <el-option label="normal" value="normal"></el-option>
                  <el-option label="bold" value="bold"></el-option>
                  <el-option label="bolder" value="bolder"></el-option>
                  <el-option label="lighter" value="lighter"></el-option>
                  <el-option label="100" value="100"></el-option>
                  <el-option label="200" value="200"></el-option>
                  <el-option label="300" value="300"></el-option>
                  <el-option label="400" value="400"></el-option>
                  <el-option label="500" value="500"></el-option>
                  <el-option label="600" value="600"></el-option>
                  <el-option label="700" value="700"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="文字的字体系列">
                <el-select v-model="option.series[0].label.fontFamily" >
                  <el-option label="serif" value="serif"></el-option>
                  <el-option label="monospace" value="monospace"></el-option>
                  <el-option label="Arial" value="Arial"></el-option>
                  <el-option label="Courier New" value="Courier New"></el-option>
                  <el-option label="Microsoft YaHei" value="Microsoft YaHei"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="文本大小">
                <el-input-number style="width:100%;" v-model="option.series[0].label.fontSize" :min="10" :max="30" ></el-input-number>
              </el-form-item>
              <el-form-item label="文字水平对齐方式">
                <el-select v-model="option.series[0].label.align" >
                  <el-option label="left" value="left"></el-option>
                  <el-option label="center" value="center"></el-option>
                  <el-option label="right" value="right"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="文字垂直对齐方式">
                <el-select v-model="option.series[0].label.verticalAlign" >
                  <el-option label="top" value="top"></el-option>
                  <el-option label="middle" value="middle"></el-option>
                  <el-option label="bottom" value="bottom"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="行高">
                <el-input-number style="width:100%;" v-model="option.series[0].label.lineHeight" :min="10" :max="60" ></el-input-number>
              </el-form-item>
              <el-form-item label="文字块背景颜色">
                <el-color-picker v-model="option.series[0].label.backgroundColor"></el-color-picker>
              </el-form-item>
              <el-form-item label="文字块边框颜色">
                <el-color-picker v-model="option.series[0].label.borderColor"></el-color-picker>
              </el-form-item>
              <el-form-item label="文字块边框宽度">
                <el-input-number style="width:100%;" v-model="option.series[0].label.borderWidth" :min="0" :max="60" ></el-input-number>
              </el-form-item>
              <el-form-item label="文字块的圆角">
                <el-input-number style="width:100%;" v-model="option.series[0].label.borderRadius" :min="0" :max="60" ></el-input-number>
              </el-form-item>
              <el-form-item label="文字块的内边距">
                <el-input-number style="width:100%;" v-model="option.series[0].label.padding" :min="0" :max="100" ></el-input-number>
              </el-form-item>
              <el-form-item label="文字块的背景阴影颜色">
                <el-color-picker v-model="option.series[0].label.shadowColor"></el-color-picker>
              </el-form-item>
              <el-form-item label="文字块的背景阴影长度">
                <el-input-number style="width:100%;" v-model="option.series[0].label.shadowBlur" :min="0" :max="100" ></el-input-number>
              </el-form-item>
              <el-form-item label="文字块的背景阴影 X 偏移">
                <el-input-number style="width:100%;" v-model="option.series[0].label.shadowOffsetX" :min="0" :max="100" ></el-input-number>
              </el-form-item>
              <el-form-item label="文字块的背景阴影 Y 偏移">
                <el-input-number style="width:100%;" v-model="option.series[0].label.shadowOffsetY" :min="0" :max="100" ></el-input-number>
              </el-form-item>
              <el-form-item label="文字块的宽度">
                <el-input v-model="option.series[0].label.width" ></el-input>
              </el-form-item>
              <el-form-item label="文字块的高度">
                <el-input v-model="option.series[0].label.height" ></el-input>
              </el-form-item>
              <el-form-item label="文字本身的描边颜色">
                <el-color-picker v-model="option.series[0].label.textBorderColor"></el-color-picker>
              </el-form-item>
              <el-form-item label="文字本身的描边宽度">
                <el-input-number style="width:100%;" v-model="option.series[0].label.textBorderWidth" :min="0" :max="100" ></el-input-number>
              </el-form-item>
              <el-form-item label="文字本身的阴影颜色">
                <el-color-picker v-model="option.series[0].label.textShadowColor"></el-color-picker>
              </el-form-item>
              <el-form-item label="文字本身的阴影长度">
                <el-input-number style="width:100%;" v-model="option.series[0].label.textShadowBlur" :min="0" :max="100" ></el-input-number>
              </el-form-item>
              <el-form-item label="文字本身的阴影 X 偏移">
                <el-input-number style="width:100%;" v-model="option.series[0].label.textShadowOffsetX" :min="0" :max="100" ></el-input-number>
              </el-form-item>
              <el-form-item label="文字本身的阴影 Y 偏移">
                <el-input-number style="width:100%;" v-model="option.series[0].label.textShadowOffsetY" :min="0" :max="100" ></el-input-number>
              </el-form-item>
              <el-form-item label="标签的对齐方式">
                <el-select v-model="option.series[0].label.alignTo" >
                  <el-option label="none" value="none"></el-option>
                  <el-option label="labelLine" value="labelLine"></el-option>
                  <el-option label="edge" value="edge"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="文字边距">
                <el-input v-model="option.series[0].label.margin" ></el-input>
              </el-form-item>
              <el-form-item label="文字的出血线大小">
                <el-input-number style="width:100%;" v-model="option.series[0].label.bleedMargin" :min="0" :max="100" ></el-input-number>
              </el-form-item>
              <el-form-item label="文字与 label line 之间的距离">
                <el-input-number style="width:100%;" v-model="option.series[0].label.distanceToLabelLine" :min="0" :max="100" ></el-input-number>
              </el-form-item>
            </el-collapse-item>

            <el-collapse-item title="数值设置">
            </el-collapse-item>
            <el-collapse-item title="提示语设置">
            </el-collapse-item>
            <el-collapse-item title="图例操作">
            </el-collapse-item>
            <el-collapse-item title="自定义配色">
            </el-collapse-item>
          </el-collapse>
          <!--<el-form-item label="132" v-if="key==='type'">-->
          <!--<el-radio v-for="(option,i) in item.dcOptionVal" :key="i" v-model="item.dcModel" :label="option.val">{{option.label}}</el-radio>-->
          <!--</el-form-item>-->
          <!--<el-form-item :label="item.label" v-if="item.dcFormType==='Checkbox'">-->
          <!--<el-checkbox-group v-model="item.dcModel">-->
          <!--<el-checkbox v-for="(option,i) in item.dcOptionVal" :key="i" :label="option.val">{{option.label}}</el-checkbox>-->
          <!--</el-checkbox-group>-->
          <!--</el-form-item>-->
          <!--<el-form-item :label="item.label" v-if="item.dcFormType==='Input'">-->
          <!--<el-input v-model="item.dcModel"></el-input>-->
          <!--</el-form-item>-->
          <!--<el-form-item :label="item.label" v-if="item.dcFormType==='InputNumber'">-->
          <!--<el-input-number style="width:100%;" v-model="item.dcModel" :min="1" :max="10" ></el-input-number>-->
          <!--</el-form-item>-->
          <!--<el-form-item :label="item.label" v-if="item.dcFormType==='Select'">-->
          <!--<el-select v-model="item.dcModel" placeholder="请选择">-->
          <!--<el-option-->
          <!--v-for="(option,i) in item.dcOptionVal"-->
          <!--:key="i"-->
          <!--:label="option.label"-->
          <!--:value="option.val">-->
          <!--</el-option>-->
          <!--</el-select>-->
          <!--</el-form-item>-->
          <!--<el-form-item :label="item.label" v-if="item.dcFormType==='Switch'">-->
          <!--<el-switch-->
          <!--v-model="item.dcModel"-->
          <!--active-color="#13ce66"-->
          <!--inactive-color="#ff4949">-->
          <!--</el-switch>-->
          <!--</el-form-item>-->
          <!--<el-form-item :label="item.label" v-if="item.dcFormType==='ColorPicker'">-->
          <!--<div class="block">-->
          <!--<span class="demonstration">有默认值</span>-->
          <!--<el-color-picker v-model="item.dcModel"></el-color-picker>-->
          <!--</div>-->
          <!--</el-form-item>-->
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import '@/components/vue-draggable-resizable.css'
import echarts from 'echarts'
export default {
  name: 'PieChart',
  props: ['option'],
  data () {
    return {
      activeNames: ['1']
    }
  },
  created () {
  },
  methods: {
    handleChange(val) {
      console.log(val);
    }
  }
}
</script>

<style scoped>
>>>.el-form-item{
  padding: 0 20px;
}
</style>
